<!--
 * @Author: 晟松
 * @Date: 2021-12-05 16:47:48
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-27 14:15:51
 * @FilePath: \volunteer-vue3-admin\src\views\AllSchool.vue
 * @Description: 社区列表页面
-->

<template>
	<div>
		<div class="head">
			<el-row align="middle" justify="start" :gutter="20" class="row">
				<el-col :span="7" class="title">学校名称</el-col>
				<el-col :span="16">
					<el-input v-model="nameInput" placeholder="请输入学校名称" clearable />
				</el-col>
			</el-row>
			<el-row align="middle" justify="start" :gutter="20" class="row">
				<el-col :span="20">
					<el-button type="primary" size="small" @click="serach">搜索</el-button>
					<el-button type="info" size="small" @click="reset">重置</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="show">
			<el-card shadow="hover" v-for="(item) in data.showList" :key="item" class="everySchool">
				<template #header>
					<div class="card-header">
						<span>{{ item.schoolName }}</span>
					</div>
				</template>
				<el-row align="middle">
					<el-col :span="2">
						<el-avatar shape="square" :size="50" :src="item.avatar"></el-avatar>
					</el-col>
					<el-col :span="8">名称：{{ item.userName }}</el-col>
					<el-col :span="8">手机号：{{ item.phone }}</el-col>
					<el-col :span="6">
						<el-tag class="mx-1" size="large">{{ managementLevelTrans(item.managementLevel) }}</el-tag>
					</el-col>
				</el-row>
				<!-- 剩下的属于自己学校的辅导员这些 -->
				<div v-if="item.belongs.length > 0">
					<el-row align="middle" v-for="(belong) in item.belongs" :key="belong.id">
						<el-col :span="2">
							<el-avatar shape="square" :size="50" :src="belong.avatar"></el-avatar>
						</el-col>
						<el-col :span="8">名称：{{ belong.userName }}</el-col>
						<el-col :span="8">手机号：{{ belong.phone }}</el-col>
						<el-col :span="6">
							<el-tag class="mx-1" size="large" type="success">{{ belong.college }}</el-tag>&nbsp;
							<el-tag
								class="mx-1"
								size="large"
								type="warning"
							>{{ managementLevelTrans(belong.managementLevel) }}-{{ gradeTrans(belong.grade) }}</el-tag>
						</el-col>
					</el-row>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup>
import { gradeTrans } from '@/utils/trans'
import {
	getAllStudent,
	getAllCollegeStudent,
	getAllCollegeAdmin,
	searchAllCollegeStudent,
	searchAllStudent,
	collegeReview,
} from "@/myApi/school";
import { getCollegeAllStudentVol, getAllResidentVol } from "@/myApi/vol";
import { getAllSchool, getAllCommunity, create, deleteUser, update, updatePwd, getAllCommunityInfo, getAllSchoolInfo } from "../myApi/user";
import { localFile } from '@/myApi/upload'
import { reactive, ref, computed, onBeforeMount, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import enums from "@/utils/enums";
import { batchRegisterStudent } from "../myApi/school";
import { ElMessage } from 'element-plus'


let mine = reactive({ student: { name: "蒋晟松" } });

const store = useStore();
const router = useRouter();
let identity = computed(() => store.getters.identity);
// console.log("identity: ", identity.value);
let userAdmin = computed(() => store.getters.user);
let schoolAdmin = computed(() => store.getters.schoolAdmin);

let nameInput = ref("");

// 在table中转换一下性别为中文
const genderTrans = (row, column, cellValue, index) => {
	if (cellValue == 'male') {
		return '男'
	} else if (cellValue == 'female') {
		return '女'
	} else {
		return '无'
	}
}

const managementLevelTrans = (managementLevel) => {
	if (managementLevel == enums.managementLevel.school) return '校级管理员'
	return '院级辅导员'
}
// 存储所有数据的对象
let data = reactive({ allSchool: [], showList: [] });
let limitOffset = reactive({ limit: 10, offset: 0 });
onMounted(async () => {
	await init()
});
/**
 * @description: 初始化table所需的数据
 * @param {*}
 * @return {*}
 */
async function init() {
	data.allSchool = await getAllSchoolInfo()
	console.log("data.allSchool: ", data.allSchool.data);
	// 所有的校级管理员信息
	data.showList = data.allSchool.data.allSchoolAdmin
}

const serach = async () => {
	// console.log(nameInput.value, phoneInput.value, available.value);
	// 注意数据格式

	console.log('data.showList: ', data.showList);
}

const reset = () => {
	nameInput.value = ''
}


</script >

<style lang="scss" scoped>
.head {
	display: flex;
	// justify-content: space-around;
	flex-wrap: wrap;
	.allBtn {
		margin: 10px;
	}
	.row {
		margin: 0 10px;
		min-width: 20vw;
		.title {
			font-size: 0.9rem;
			font-weight: bold;
		}
	}
}
.show {
	margin-top: 10px;
	.el-row {
		margin-bottom: 20px;
		border-bottom: solid 1px #e8eeee;
	}
	.el-row:last-child {
		margin-bottom: 0;
	}
	.el-col {
		border-radius: 4px;
	}
	.optionBtn {
	}
	.everySchool {
	}
}
</style>
